<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>web本地存储</title>
</head>

<body onload="initData()">
    <form action="http://www.baidu.com">
        用户:<input type="text" id="uname">
        密码:<input type="password" id="pwd"><br>
        <input type="checkbox" id="savePwd">记住密码<br>
        <input type="button" value="提交" onclick="login()">
    </form>

    <script>
        //加载页面完毕之后,触发initData()
        function initData() {
            //根据key获取value
            //获取本地存储的数据
            var uname = localStorage.getItem("username");
            var pwd = localStorage.getItem("password");

            //给文本框和密码框对象设置value属性
            document.getElementById("uname").value = uname;
            document.getElementById("pwd").value = pwd;
        }

        //定义函数
        function login() {
            //获取checkbox对象
            var ck = document.getElementById("savePwd");
            //如果勾选了,则为true
            if (ck.checked) {
                //获取用户名
                var uname = document.getElementById("uname").value;
                //获取密码
                var pwd = document.getElementById("pwd").value;

                //将用户名和密码进行本地存储
                //单个单个进行存储数据key-value
                localStorage.setItem("username", uname);
                localStorage.setItem("password", pwd);
            } else {
                //移除用户名和密码
                localStorage.clear();
            }
        }
    </script>
</body>

</html>